<template>
  <div class="r">
    <nav class="top">
      <div class="top__header">
        <div class="top__header__back iconfont" @click="back">&#xe602;</div>
        确认订单
      </div>
      <div class="top__receiver">
        <div class="top__receiver__title">收货地址</div>
        <div class="top__receiver__address">
          北京理工大学国防科技园2号楼10层
        </div>
        <div class="top__receiver__info">
          <span class="top__receiver__info__name">瑶妹（先生）</span>
          <span class="top__receiver__info__phone">18911024266</span>
        </div>
      </div>
    </nav>
    <section class="main">
      <div>沃尔玛</div>
      <div v-for="item in contentList" :key="item._id">
        <template>
          <div v-if="showAllProducts || item._id < 3" class="product__item">
            <img class="product__img" :src="item.imgUrl" alt="" />
            <div class="product__detail">
              <h4 class="product__detail__title">{{ item.name }}</h4>
              <p class="product__detail__price">
                <span class="price">￥{{ item.price }}</span
                >x<span class="price">{{
                  contentList?.[item._id]?.count
                }}</span>
              </p>
            </div>
            <div class="product__number">
              ￥
              {{
                (
                  contentList?.[item._id]?.count *
                  contentList?.[item._id]?.price
                ).toFixed(1)
              }}
            </div>
          </div>
        </template>
      </div>
      <div class="main__ellipsis" @click="showProducts">
        共计{{ Allcount }}件 <span class="iconfont">&#xe65e;</span>
      </div>
    </section>
    <footer class="footer">
      <span class="left">实付金额￥{{ Allprice.toFixed(1) }}</span>
      <span class="right" @click="isMask = true">提交订单</span>
    </footer>
    <div class="mask" v-if="isMask">
      <div class="mask__content" v-if="!paymoney && isMask">
        <h3 class="mask__content__title">确认离开收银台？</h3>
        <p class="mask__content__desc">请尽快完成支付,否则将被取消订单</p>
        <div class="mask__content__btns">
          <div class="mask__content__btns__left" @click="isMask = false">
            取消订单
          </div>
          <div class="mask__content__btns__right" @click="paymoney = true">
            确认支付
          </div>
        </div>
      </div>
      <div class="mask__content" v-if="paymoney && isMask">
        <div class="iconfont mask__content__yes">&#xeaf1;</div>
        <div class="iconfont mask__content__no" @click="closeFunc">&#xe8e7;</div>
        <p class="iconfont mask__content__notice">支付成功,等待配送</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "order",
  components: {},
  data() {
    return {
      shopId: this.$route.params.shopId || 1,
      shop: this.$store.state.cart[this.shopId],
      contentList: {},
      showAllProducts: false,
      Allcount: this.$store.state.allcount,
      Allprice: this.$store.state.allprice,
      isMask: false,
      paymoney: false,
    };
  },
  mounted() {
    const List = localStorage.cart;
    this.contentList = JSON.parse(List)?.[this.shopId];
  },

  methods: {
    closeFunc(){
      this.paymoney = false
      this.isMask = false
      this.$store.commit('CLEAR')
      
    },
    back() {
      this.$router.back();
    },
    showProducts() {
      this.showAllProducts = !this.showAllProducts;
      const S = document.querySelector(".main__ellipsis .iconfont");
      if (this.showAllProducts) {
        S.innerHTML = "&#xe65b;";
      } else {
        S.innerHTML = "&#xe65e;";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixins.scss";
.mask {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
  &__content {
    position: relative;
    box-sizing: border-box;
    height: 1.57rem;
    width: 3.01rem;
    margin: 2.43rem 0.37rem 2.67rem 0.37rem;
    background-color: #fff;
    border-radius: 0.04rem;
    text-align: center;
    padding: 0.24rem 0;
    &__title {
      margin: 0;
      font-size: 0.18rem;
      color: #333333;
    }
    &__desc {
      margin: 0.12rem 0;
      font-size: 0.14rem;
      color: #666666;
    }
    &__btns {
      position: relative;
      margin-top: 0.22rem;
      font-size: 0.14rem;
      line-height: 0.32rem;
      &__left {
        position: absolute;
        left: 0.59rem;
        width: 0.8rem;
        height: 0.32rem;
        color: #0091ff;
        border: 0.01rem solid #4fb0f9;
        border-radius: 0.16rem;
      }
      &__right {
        position: absolute;
        right: 0.59rem;
        width: 0.8rem;
        height: 0.32rem;
        color: #fff;
        background: #4fb0f9;
        border: 0.01rem solid #4fb0f9;
        border-radius: 0.16rem;
      }
    }
    &__yes{
      margin-top: .22rem;
      color: #000000;
      font-size: .52rem;
    }
    &__no{
      position: absolute;
      top: 0.12rem;
      right: 0.12rem;
      font-size: 0.24rem;
      color: #666666;
    }
    &__notice {
      font-size: 0.18rem;
      margin-top: .1rem;
      color: #333333;
    }
  }
}
.r {
  background: #f5f5f5;
  margin: -0.08rem /* 8/10 */;
  height: 6.67rem;
}
.top {
  height: 1.96rem;
  background-size: 100% 1.59rem;
  background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
  background-repeat: no-repeat;
  &__header {
    display: flex;
    padding: 0.16rem 0;
    line-height: 0.22rem;
    font-size: 0.16rem;
    @include ellipsis;
    color: #fff;
    &__back {
      font-size: 0.16rem;
      padding: 0 0.085rem 0 0.1rem;
      margin-right: 1.18rem;
    }
  }
  &__receiver {
    box-sizing: border-box;
    padding: 0.16rem;
    width: 3.39rem;
    height: 1.11rem;
    margin: 0.04rem 0.18rem;
    background: #ffffff;
    border-radius: 0.04rem;
    font-size: 0.16rem;
    color: #333333;
    &__address {
      font-size: 0.14rem;
      color: #333333;
      margin: 0.14rem 0 0.06rem 0;
    }
    &__info {
      font-size: 0.12rem;
      color: #666666;
    }
  }
}
.main {
  box-sizing: border-box;
  width: 3.36rem;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 0.04rem;
  padding: 0.16rem;
  overflow-y: scroll;

  &__ellipsis {
    width: 3.07rem;
    height: 0.28rem;
    background: #f5f5f5;
    text-align: center;
    line-height: 0.28rem;
    font-size: 0.14rem;
    color: #999999;
  }
}
.main .iconfont {
  font-size: 0.14rem;
  color: #999999;
}
.main div:first-child {
  font-size: 0.16rem;
  color: #333333;
  margin-bottom: 0.16rem;
}
.product__item {
  position: relative;
  display: flex;
  border-bottom: 0.01rem solid #f1f1f1;
  margin-bottom: 0.08rem;
}
.product__img {
  height: 0.46rem;
  width: 0.46rem;
  margin-right: 0.16rem;
  margin-bottom: 0.08rem;
}
.product__detail {
  &__title {
    font-size: 0.14rem;
    color: #333333;
    margin: 0;
  }

  &__price {
    margin: 0;
    margin-top: 0.06rem;
    color: red;
  }
}
.product__number {
  position: absolute;
  right: 0.18rem;
  bottom: 0.12rem;
  font-size: 0.18rem;
}

.price {
  font-size: 0.14rem;
  color: #e93b3b;
  line-height: 0.2rem;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.5rem;
  background-color: #fff;
}
.left {
  font-size: 0.14rem;
  color: #333333;
  text-align: center;
  line-height: 0.5rem;
  margin-left: 0.24rem;
}
.right {
  float: right;
  width: 0.98rem;
  height: 0.5rem;
  line-height: 0.5rem;
  background: #4fb0f9;
  text-align: center;
  font-size: 0.14rem;
  color: #ffffff;
}
</style>